<template>
  <div>
    <!--介绍-->
    <div class="all-intro-container">
      <H1>我的示例Demo</H1>
      <div>{{bindingDemo}}</div>
      <div>
        <button @click="opBingdingDemo">点我给bingingDemo增加一个“1”</button>
        <button @click="btnFade" :class="{'fade-btn':showAni}" class="demo-tmp-btn-style">左边的按钮就是我说的骨架，这个按钮加了css的装饰</button>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  name: "MyDemoMainPage",
  //变量
  data(){
    return{
      bindingDemo:'在这个demo中我会列出一些常用的前端样式和功能。就比如现在的这段文字，其实就是vue' +
          '中的绑定机制的示例。每个vue组件分为template的html部分，script的js部分和style的css部分。' +
          'html是一个网页的骨架，css在骨架的基础上加以装饰，js则负责处理整个页面的逻辑。vue框架强大的一点' +
          '就是html和js中属性的动态绑定，比如你点击下面的一个按钮，js中的bingingDemo值就会改变，视图中展示' +
          '的文本也就随着一起改变。可以绑定的不止是文本，还有函数，style属性，动画等等，我在下面列了几个示例。',
      showAni:false,
    }
  },
  //加载完毕后回调函数
  mounted() {

  },
  //自定义函数
  methods:{
    opBingdingDemo(){
      this.bindingDemo += "1";
    },
    btnFade(){
      this.showAni = true;
      setTimeout(()=>{
        this.showAni = false;
      },1000)
    }
  }
}
</script>

<style scoped>
  /*按钮样式*/
  .demo-tmp-btn-style{
    padding: 8px 12px;
    letter-spacing: 1px;
    font-size: 14px;
    margin: 20px;
    background-color: #6886d2;
    color: white;
    border-radius: 4px;
    border: none;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  }
  .demo-tmp-btn-style:hover{
    background-color: #8383d3;
  }
  /*尝试定义一个绑定了动画的类，点击按钮后触发动画*/
  .fade-btn{
    animation: btnFadeAni 1s 1;
  }
  @keyframes btnFadeAni {
    0%{
      opacity: 1;
    }
    30%{
      transform: rotateZ(30deg) scale(1.6);
    }
    100%{
      opacity: 0;
    }
  }

</style>